// 进入页面：
// 判断是否存在  token
//    存在：
//        判断是否是登录页面：
//          是：跳转到主页
//          否：向下执行
//    不存在：
//        判断是否在白名单中 (白名单：不需要登录可以直接访问的页面： login, 404)
//           是：向下执行
//           否：跳转到登录页面
// 访问权限的拦截
import router from '@/router'
import store from '@/store'
import { Message } from 'element-ui'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 定义白名单
const WHITE_LIST = ['/login', '/404']

// 添加导航守卫：
// beforeEach: 前置守卫（进入路由之前执行的逻辑代码）
router.beforeEach(async (to, from, next) => {
  // 开启进度条
  NProgress.start()
  // // 得到 token： 去 vuex 模块中获取
  const token = store.getters.token
  // 判断 token 是否存在
  if (token) {
    // 判断是否存在用户信息
    // 得到用户信息
    const userInfo = store.getters.userInfo
    // 判断是否存在
    if (!userInfo.username) {
      // 如果用户信息不存在：调用接口得到数据
      const userInfo = await store.dispatch('user/getUserInfo')
      // 动态获取当前用户的动态权限路由
      const myroutes = await store.dispatch(
        'permission/set_routes',
        userInfo.data.roles.menus
      )
      // 将动态路由权限添加到路由对象中：
      // 路由中有一个方法： addRoutes 方法，这个方法可以动态向路由中添加路由选项
      router.addRoutes([
        ...myroutes,
        // 404 page must be placed at the end !!!
        { path: '*', redirect: '/404', hidden: true }
      ]) // 添加时是需要时间的
      // addRoutes 之后添加一个 next(to.path) 就 okey 了
      next(to.path)
    }
    if (to.path === '/login') {
      Message({
        message: '您已经登录了，请不要调皮',
        type: 'info'
      })
      next('/')
      // 关闭进度条
      NProgress.done()
    } else {
      next()
    }
  } else {
    // 判断是否在白名单中
    console.log(WHITE_LIST.indexOf(to.path) !== -1)
    if (WHITE_LIST.indexOf(to.path) !== -1) {
      next()
    } else {
      Message({
        message: '对不起，您还没有登录',
        type: 'info'
      })
      // 跳转到登录页面：记录之前访问的页面的路径：
      next(`/login?_redirect=${to.path}`)
    }
  }
})

// afterEach：后置钩子（进入路由之后执行的逻辑代码）
router.afterEach((to, from) => {
  // 关闭进度条
  NProgress.done()
})
